.container {
  :global {
    .ant-input-affix-wrapper {
      background-color: #24264d !important;
      border-radius: 20px;
      border: 1px solid #687296;
      height: 40px;
      color: #fff;
    }

    .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
      box-shadow: 0px 0px 8px 0px #8080f2;
      border-color: #687296;
    }

    .ant-input-affix-wrapper-focused {
      box-shadow: 0px 0px 8px 0px #8080f2;
    }

    .ant-input-prefix {
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.3s;
    }

    .ant-input-affix-wrapper-focused .ant-input-prefix {
      color: #fff;
    }

    input {
      font-size: 14px;
      background-color: transparent !important;
      border: 0;
      color: #fff;
      border-color: transparent !important;
      box-shadow: none !important;

      &:-webkit-autofill {
        -webkit-text-fill-color: #fff !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
      }
    }
    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
    input:-moz-placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
    input::-moz-placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
    input:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
  }
}
